<template>
  <div class="record-wrapper">
    <div class="container">
      <div class="page-title">
        <span>申请成为顾问</span>
        <span class="close-btn" @click="close">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <el-scrollbar class="scrollbar">
        <div class="form-container">
          <el-form class="form" ref="form" :model="form" :rules="rules" size="small" label-width="200px"
            label-suffix="：">
            <el-form-item label="申请顾问类型" prop="consultantApplyType">
              <el-select class="select" v-model="form.consultantApplyType" placeholder="请选择申请顾问类型">
                <el-option v-for="item in consultantTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请人" prop="applyName">
              <el-input placeholder="请选择申请人" v-model="form.applyName" @focus="handleFocusInput"></el-input>
            </el-form-item>
            <el-form-item label="申请部门" prop="department">
              <el-input disabled placeholder="选中申请人后申请部门自动填写" v-model="form.department"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="擅长方向(最多选3个)" prop="goodAtDirection">
              <el-checkbox-group v-model="form.goodAtDirection" :min="1" :max="3">
                <el-checkbox v-for="item in goodAtDirections" :label="item" :key="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
              <div style="color: #7052ff; cursor: pointer; display: inline-block" @click="showAddDirectionDialog">
                <i class="el-icon-circle-plus-outline" style="margin-right: 8px"></i>自定义添加
              </div>
            </el-form-item>
            <el-form-item label="标签(最多选3个)" prop="tag">
              <el-checkbox-group v-model="form.tag" :min="1" :max="3">
                <el-checkbox v-for="item in tags" :label="item" :key="item">{{
                  item
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="申请理由" prop="applyReason">
              <el-input placeholder="请填写申请理由" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
                v-model="form.applyReason"></el-input>
            </el-form-item>
            <el-form-item label="高频咨询话题" prop="highRateTopic">
              <div style="width: 100px; color: #7052ff; cursor: pointer" @click="showAddTopicDialog"
                v-if="highRateTopics.length < 3">
                <i class="el-icon-circle-plus-outline" style="margin-right: 8px"></i>自定义添加
              </div>
              <div v-for="(item, index) in highRateTopics" :key="index" class="topics">
                <el-input :disabled="true" v-model="highRateTopics[index]"
                  style="width: 90%; margin-bottom: 14px"></el-input><span v-if="highRateTopics.length > 1"
                  @click="deleteTopic(index)">删除</span>
              </div>
            </el-form-item>
            <el-form-item label="联系方式(选填)" prop="phone">
              <el-input maxlength="11" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱(选填)" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="bday">
              <el-input type="date" max="2200-12-30" min="1900-01-01" value-format="yyyy-MM-dd"
                v-model="form.bday"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="regionName">
              <el-input v-model="form.regionName"></el-input>
            </el-form-item>
            <el-form-item label="从业年限" prop="workYears">
              <el-input v-model="form.workYears" type="number" placeholder="请输入从业年限/年"></el-input>
            </el-form-item>
            <el-form-item label="小程序上展示的职务" prop="uniappJob">
              <el-input v-model="form.uniappJob"></el-input>
            </el-form-item>
            <el-form-item label="小程序上展示的服务人数" prop="serveNum">
              <el-input v-model="form.serveNum" type="number" placeholder="请输入服务人数/人"></el-input>
            </el-form-item>
            <el-form-item label="上传形象照片" prop="photo">
              <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <div v-else class="upload-button">
                  <i class="el-icon-picture"></i>
                  <span>添加</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="上传企业微信个人二维码" prop="wechatQrcode">
              <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
                :on-success="handlewechatQrcodeSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="wechatQrcode" :src="wechatQrcode" class="avatar" />
                <div v-else class="upload-button">
                  <i class="el-icon-picture"></i>
                  <span>添加</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="审核人" prop="auditObj">
              <el-select class="select" v-model="form.auditObj" value-key="auditAdminId" placeholder="请选择审核人">
                <el-option v-for="item in auditerList" :key="item.auditAdminId" :label="item.auditAdminName"
                  :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
      <div class="operation">
        <el-button class="btn" type="primary" v-loading="loading" @click="onSubmit">提 交</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" :modal="false" width="30%" center @close="closeSecondDialog"
      show-close>
      <div class="editGoodAt">
        {{ secondDialogTitle }}
      </div>
      <el-input v-model="nextAddText"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSecondDialog">取 消</el-button>
        <el-button type="primary" @click="confirmSecondDialog">确 定</el-button>
      </span>
    </el-dialog>
    <PersonSelect :visible.sync="personSelectVisible" width="70%" :selectedArr="selectedArr" :component="dataType"
      :multiple="false" @cancel="cancel" @confirm="selectConfirm"></PersonSelect>
  </div>
</template>

<script>
import { getAuditerList, uploadImage, addApplyConsultant } from "@/api";

export default {
  components: {
    PersonSelect: () => import("@/components/PersonSelect"),
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      wechatQrcode: "",
      imageUrl: "",
      uploadAction: "https://upload.yl1001.com/upload/files/save", // 测试环境要换成是https
      accept: ".png,.jgp,.jpeg",
      secondDialogTitle: "自定义擅长方向",
      highRateTopics: ["如何获得高绩效", "如何拿高薪"],
      nextAddText: "",
      goodAtDirections: [
        "职业规划",
        "简历精修",
        "投递指导",
        "面试辅导",
        "薪酬谈判",
        "Offer筛选",
      ],
      tags: ["一览精选", "平台优选", "金牌导师"],
      stockNum: 0,
      loading: false,
      form: {
        consultantApplyType: "",
        applyName: "",
        department: "",
        sex: "",
        goodAtDirection: [],
        tag: [],
        applyReason: "",
        phone: "",
        email: "",
        workYears: "",
        uniappJob: "",
        serveNum: "",
        auditObj: null, // 审核人
        regionName: "", // 地区信息
        bday: "", // 生日
      },
      rules: {
        consultantApplyType: [
          { required: true, message: "请选择申请顾问类型", trigger: "change" },
        ],
        applyName: [
          { required: true, message: "请填写申请人名称", trigger: "change" },
        ],
        department: [
          { required: true, message: "请选申请部门", trigger: "change" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        goodAtDirection: [
          { required: true, message: "请选择擅长方向", trigger: "change" },
        ],
        tag: [{ required: true, message: "请选择标签", trigger: "change" }],
        applyReason: [
          { required: true, message: "请填写申请理由", trigger: "change" },
        ],
        highRateTopic: [{ required: false }],
        phone: [{ required: false }],
        email: [{ required: false }],
        regionName: [
          { required: true, message: "请填写地区信息", trigger: "change" },
        ],
        bday: [{ required: true, message: "请填写生日", trigger: "change" }],
        workYears: [
          { required: true, message: "请填写从业年限", trigger: "change" },
        ],
        uniappJob: [
          {
            required: true,
            message: "请填写小程序上展示的职务",
            trigger: "change",
          },
        ],
        serveNum: [
          {
            required: true,
            message: "请填写小程序上展示的服务人数",
            trigger: "change",
          },
        ],
        photo: [
          {
            required: true,
            message: "请上传形象照片",
            trigger: "change",
          },
        ],
        wechatQrcode: [
          {
            required: true,
            message: "请上传企业微信个人二维码",
            trigger: "change",
          },
        ],
      },
      consultantTypeOptions: [
        { label: "内部职途顾问", value: 10 },
        { label: "外部职途顾问", value: 20 },
      ],
      centerDialogVisible: false,
      auditerList: [],
      appList: [],
      localAppList: [],
      personSelectVisible: false,
      selectedArr: [],
      dataType: "el-dialog",
      currentSelectApplyPersonInfo: {},
      flag: "",
      tempoaId: "", // 临时oaId
    };
  },
  created() {
    this.getAuditerListFn();
  },
  mounted() {
    this.$refs.form.resetFields();
  },
  methods: {
    close() {
      this.$emit("closeBecomeConsultant");
    },
    beforeAvatarUpload() {
      console.log("bbb");
    },
    handleAvatarSuccess(data) {
      this.$message({
        type: "success",
        message: "上传成功",
      });
      this.imageUrl = data.data[0];
      uploadImage({
        file: data.data[0],
      });
      // this.$refs.form.clearValidate(["photo"]);
      delete this.rules["photo"]; // 上传成功后去除掉photo的校验规则
    },
    handlewechatQrcodeSuccess(data) {
      this.$message({
        type: "success",
        message: "上传成功",
      });
      this.wechatQrcode = data.data[0];
      uploadImage({
        file: data.data[0],
      });
      // this.$refs.form.clearValidate(["photo"]);
      delete this.rules["wechatQrcode"]; // 上传成功后去除掉photo的校验规则
    },
    deleteTopic(index) {
      this.highRateTopics.splice(index, 1);
    },
    closeSecondDialog() {
      console.log("123");
      this.centerDialogVisible = false;
      this.nextAddText = "";
    },
    confirmSecondDialog() {
      if (this.nextAddText !== "") {
        if (this.secondDialogTitle === "自定义擅长方向") {
          this.goodAtDirections.push(this.nextAddText);
        } else {
          this.highRateTopics.push(this.nextAddText);
        }
        this.nextAddText = "";
        this.centerDialogVisible = false;
      } else {
        this.$message.error("不可添加空内容");
      }
    },
    showAddDirectionDialog() {
      this.centerDialogVisible = true;
      this.secondDialogTitle = "自定义擅长方向";
    },
    showAddTopicDialog() {
      this.centerDialogVisible = true;
      this.secondDialogTitle = "添加话题";
    },

    getAuditerListFn() {
      getAuditerList().then((res) => {
        if (res.code == 200) {
          this.auditerList = res.data;
          if (this.auditerList.length > 0) {
            const temp = this.auditerList.find(
              (item) => item.auditAdminId == "228"
            );
            temp && (this.form.auditObj = temp);
          }
        }
      });
    },

    handleFocusInput() {
      this.personSelectVisible = true;
    },
    selectConfirm(e) {
      console.log("e", e);
      this.tempoaId = e[0].id;
      this.currentSelectApplyPersonInfo = e[0];
      this.form.applyName = e[0].name;
      this.form.department = e[0].dept;
      this.form.depId = e[0].uGroup;
      this.form.dept = e[0].dept;
    },
    cancel() {
      this.personSelectVisible = false;
    },
    async addApplyConsultant() {
      const params = {
        examineName: this.form.auditObj.auditAdminName,
        examineOaId: this.form.auditObj.auditAdminId,
        goodAt: this.form.goodAtDirection.join("|"),
        applyReason: this.form.applyReason,
        consultantId: "",
        regionName: this.form.regionName,
        serviceMail: this.form.email,
        consultantTag: this.form.tag.join("|"),
        examineStatus: 20, // 审核状态 写死20 新增之后都是审核中
        consultantType: this.form.consultantApplyType,
        bday: this.form.bday,
        briefDesc: "",
        consultantPic: this.imageUrl,
        positiveDesc: "",
        servicePhone: this.form.phone,
        wechatQrcode: this.wechatQrcode, //没有放form里
        sex: this.form.sex,
        showRateScore: "",
        useStatus: 2,
        consultantName: this.form.applyName,
        serviceCount: this.form.serveNum,
        regionId: "",
        highTopic: this.highRateTopics.join("|"),
        positionName: this.form.uniappJob,
        workYear: this.form.workYears,
        oaId: this.tempoaId,
        applyOaId: JSON.parse(sessionStorage.getItem("userInfo"))
          .user_source_id,
        depId: this.form.depId,
        depName: this.form.dept,
      };
      console.log("params", params);
      const res = await addApplyConsultant(params);
      if (res.code === 200) {
        console.log("res", res);
        this.$emit("addSuccess");
        this.$message.success(res.status_desc);
      } else if (res.code === 201) {
        this.$message.error(res.status_desc);
      }
    },
    onSubmit() {
      // this.addApplyConsultant();

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认申请的事项是否正确", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.addApplyConsultant();
          });
        } else {
          // this.addApplyConsultant();
          console.log("这里点击过再次确定按钮但是失败");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.record-wrapper {
  width: 100%;
  height: 80vh;
  overflow-y: hidden;
  background-color: #fff;
  .container {
    height: 100%;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    .page-title {
      padding: 18px 24px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 22px;
        color: #222;
        font-weight: 600;
      }
      .close-btn {
        cursor: pointer;
      }
    }
    .scrollbar {
      height: calc(100% - 136px);
    }
    .form-container {
      margin: 0 auto;
      margin-top: 24px;
      width: 85%;
      .left-num {
        font-size: 14px;
        color: #f44716;
      }
      .form {
        width: 100%;
        .select {
          width: 100%;
        }
        .spe-select {
          width: 87%;
        }
        .flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: $primary_color;
          font-size: 15px;
          .icon-container {
            display: flex;
            align-items: center;
            cursor: pointer;
            .self-icon {
              font-size: 18px;
              margin-right: 3px;
            }
          }
        }
        .checkbox {
          ::v-deep .el-form-item__content {
            display: flex;
          }
        }
        ::v-deep .el-form-item--small.el-form-item {
          margin-bottom: 32px;
        }
        ::v-deep .el-tag.el-tag--info {
          margin-right: 8px;
          color: #333;
        }
      }
      ::v-deep .el-form-item__label {
        padding: 0 4px 0 0;
        color: #636e95;
      }
      .topics {
        span {
          margin-left: 10px;
          color: #7052ff;
          cursor: pointer;
        }
      }
    }
  }
  .operation {
    padding: 15px 0;
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: center;
    .btn {
      width: 200px;
    }
  }
  .editGoodAt {
    font-size: 22px;
    color: #222;
    font-weight: 600;
    padding: 18px 24px 18px 0;
  }
  .upload-button {
    display: flex;
    flex-direction: column;
    background-color: #ececec;
    border-radius: 9px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .el-icon-picture {
    font-size: 28px;
    color: #8c939d;
    width: 95px;
    height: 75px;
    line-height: 75px;
    text-align: center;
  }
  .avatar {
    width: 95px;
    height: 95px;
    display: block;
  }
}
</style>
